سون لرن • آموزش

در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی و گریدبندی بسیار زیبا و خلاقانه هست و میتونین با اسکرول صفحه به سمت پایین انیمیشنهای مختلف رو ببینید و لذت ببرید. از گریدبندی و نحوه نمایش المنتهای اون میتونین ایده بگیرید و در سایت و طراحیای خودتون اعمال کنید.

برای شروع وارد سایت details بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: sans-serif;

background-color: #000;

}

section {

height: 350px;

width: 94%;

box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

background-color: #000;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: relative;

overflow: hidden;

width: 100%;

margin: 0 auto 0px;

}

section a {

text-transform: uppercase;

text-align: center;

text-decoration: none;

font-size: 4.875em;

font-weight: 900;

color: #fff;

}

section a:after, section a:before {

content: '';

}

section.head {

background-color: #fff;

position: relative;

z-index: 10;

}

section.head a {

width: 652px;

height: 78px;

line-height: 78px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -326px;

margin-top: -39px;

font-weight: 200;

color: #BABABA;

-webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

-moz-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

}

section.head a:before, section.head a:after {

color: #000;

font-weight: 900;

font-size: 30px;

text-transform: none;

display: block;

-webkit-transition: inherit;

-moz-transition: inherit;

transition: inherit;

}

section.head a:before {

content: attr(data-bf);

position: absolute;

top: -45px;

left: -5px;

}

section.head a:after {

content: attr(data-af);

position: absolute;

right: 0;

bottom: -30px;

}

section.head a:hover {

-webkit-transform: scale(1.05);

-moz-transform: scale(1.05);

-ms-transform: scale(1.05);

-o-transform: scale(1.05);

transform: scale(1.05);

}

section.head a:hover:before {

-webkit-transform: scale(1.2) translate(-25px, -15px);

-moz-transform: scale(1.2) translate(-25px, -15px);

-ms-transform: scale(1.2) translate(-25px, -15px);

-o-transform: scale(1.2) translate(-25px, -15px);

transform: scale(1.2) translate(-25px, -15px);

}

section.head a:hover:after {

-webkit-transform: scale(1.2) translate(25px, 15px);

-moz-transform: scale(1.2) translate(25px, 15px);

-ms-transform: scale(1.2) translate(25px, 15px);

-o-transform: scale(1.2) translate(25px, 15px);

transform: scale(1.2) translate(25px, 15px);

}

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون فرآیندی که خودشون بر روی آیکونهای SVG اعمال میکنن رو توضیح داده و میتونین از اون استفاده کنید و تجربتون بیشتر بشه. در این آموزش بصورت مرحله به مرحله، فرآیند آماده سازی آیکونها برای استفاده در سایت قرار داده شده و خیلی میتونه کمکتون کنه.

برای شروع وارد سایت our-svg-icon-process بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

در جلسه سی و یکم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش پایانی پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد

در این جلسه می پردازیم به :

استفاده از پلاگین joyride برای ایجاد تور قالب

کدنویسی پلاگین کاربردی اسکرول به بالای صفحه توسط جاوااسکریپت و انیمیشن های css

جمع بندی و توصیه ها

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

<html>

<head>

<title>Highcharts Tutorial</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

var chart = {

type: 'pie',

options3d: {

enabled: true,

alpha: 45,

beta: 0

}

};

var title = {

text: 'Browser market shares at a specific website, 2014'

};

var tooltip = {

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

};

var plotOptions = {

pie: {

allowPointSelect: true,

cursor: 'pointer',

depth: 35,

dataLabels: {

enabled: true,

format: '{point.name}'

}

}

};

var series = [{

type: 'pie',

name: 'Browser share',

data: [

['Firefox', 45.0],

['IE', 26.8], {

name: 'Chrome',

y: 12.8,

sliced: true,

selected: true

},

['Safari', 8.5],

['Opera', 6.2],

['Others', 0.7]

]

}];

var json = {};

json.chart = chart;

json.title = title;

json.tooltip = tooltip;

json.plotOptions = plotOptions;

json.series = series;

$('#container').highcharts(json);

});

</script>

</body>

</html>

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک رابط کاربری برای پیش نمایش سایت در موبایل با استفاده ازCSS و Javascript ساخته میشه و میتونین از اون استفاده کنید. فرض کنید که شما یک سایت دارید که میخاید اون رو در ظاهر گوشی های مورد نظرتون در سایت دیگه ای قرار بدین. برای اینکار از iframe استفاده میکنیم. حالا میتونیم این iframe رو در این رابط کاربری قرار بدین و پیش نمایش موبایل رو به کاربران نمایش بدین. چند دستگاه مختلف وحود داره که میتونین از هر کدوم خواستید استفاده کنید. کدهای مربوط به این ابزار در پایین صفحه مورد نظر قرار داده شده و میتونین از اون استفاده کنید.

برای شروع وارد سایت preview-tool بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

section {

font-family: 'Open Sans', sans-serif;

height: 350px;

position: relative;

background-clip: fixed;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

overflow: hidden;

width: 94%;

margin: 0 auto 30px;

}

section a {

text-transform: uppercase;

font-weight: 800;

text-align: center;

text-decoration: none;

color: #fff;

display: block;

font-size: 4.875em;

}

section.p2 {

background-image: url(3.jpg);

}

section.p2 a {

width: 216px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -108px;

margin-top: -47px;

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

color: transparent;

}

section.p2 a:after,

section.p2 a:before {

-webkit-transition: inherit;

-moz-transition: inherit;

-ms-transition: inherit;

-o-transition: inherit;

transition: inherit;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

content: attr(data-cont);

color: #fff;

}

section.p2 a:before {

-webkit-clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

}

section.p2 a:after {

-webkit-clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

}

section.p2 a:hover {

color: #fff;

}

section.p2 a:hover:before {

-webkit-transform: translate(0, -100%);

-moz-transform: translate(0, -100%);

-ms-transform: translate(0, -100%);

-o-transform: translate(0, -100%);

transform: translate(0, -100%);

color: transparent;

}

section.p2 a:hover:after {

-webkit-transform: translate(0, 100%);

-moz-transform: translate(0, 100%);

-ms-transform: translate(0, 100%);

-o-transform: translate(0, 100%);

transform: translate(0, 100%);

color: transparent;

}

مدرسه استانداردهای وب برگزار میکند

گردهمایی 2 روزه توسعه دهندگان وب ایران در تیرماه

به گزارش روابط عمومی مدرسه استانداردهای وب، کارگاههای جانبی این همایش جهت آموزش کامل برخی از موضوعات در تاریخ 30 و 31 تیر 95 برگزار می شود و تمامی شرکتکنندگان حضوری، میتوانند در کارگاه مورد نظر خود شرکت کنند.

همچنین بخش سخنرانیهای این رویداد نیز به صورت آنلاین پوشش داده خواهد شد تا افرادی که امکان حضور در همایش را ندارند، بتوانند از سخنرانیها استفاده کنند.

آشنایی با تکنیکها، کتابخانهها و فریم ورکهای جدید، شرکت در کارگاههای آموزشی وبرقراری ارتباط و شبکهسازی با سایر متخصصین این حوزه از اهداف این همایش ذکر شده است .

گفتنی است مدرسه استانداردهای وب، با هدف استاندارد سازی این بستر، فعالیت خود را از سال 1392 آغاز کرد و در این مدت با برگزاری همایش ها، کارگاه ها و گردهمایی های متعدد تلاش دارد تا به اهداف تعیین شده خود برسد؛ این مدرسه با برگزاری کارگاه ها و همایش های تخصصی و فنی به آموزش دست اندرکاران حوزه فناوری اطلاعات و ارتباطات کمک خواهد کرد. این مجموعه قصد دارد تا تمامی اقشار جامعه بتوانند از این رویداد 2روزه بهره مند شوند به همین منظور در جهت حمایت از دانشجویان، دانش آموزان و همچنین مددجویان بهزیستی، تخفیفات ویژه ای برای این عزیزان در نظر گرفته شده که با مراجعه به وب سایت همایش اطلاعات تکمیلی در این زمینه دریافت می شود.

:: وبسایت سون لرن به عنوان حامی رسانه ای، شما را به ثبت نام سریعتر در این همایش دعوت می نماید .

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* =====================================================

Toggle - switch stylee

===================================================== */

.toggle--switch .toggle--btn {

position: relative;

width: 120px;

height: 44px;

font-family: 'PT Sans', Sans Serif;

text-transform: uppercase;

color: #fff;

background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);

background-position: -80px 0;

background-size: 200% 100%;

box-shadow: inset 0 0px 22px -8px #111;

}

.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {

border-radius: 4px;

}

.toggle--switch .toggle--btn:before {

display: block;

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

width: 52px;

height: 44px;

border: 2px solid #202027;

background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);

background-color: #2b2e3a;

background-size: 5px 5px;

text-indent: -100%;

}

.toggle--switch .toggle--feature {

position: relative;

display: block;

overflow: hidden;

height: 44px;

text-shadow: 0 1px 2px #666;

}

.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

.toggle--switch .toggle--feature:before {

content: attr(data-label-on);

left: -60%;

}

.toggle--switch .toggle--feature:after {

content: attr(data-label-off);

right: 16%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn {

background-position: 0 0;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {

left: calc(100% - 52px);

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {

left: 20%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {

right: -60%;

}